<template>
    <section class="content-wrapper">
        <a class="back" href="javascript:void(0)" @click="back"></a>
        <el-row :gutter="20">
            <el-col :span="24" class="cms-form-box">

                <el-row>
                    <el-col>
                        <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="120px">


                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="所属站点">
                                        <el-select v-model="form.siteId" placeholder="请选择" clearable style="width: 100%">
                                            <el-option
                                                    v-for="item in siteOptions"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="上级栏目">
                                        <el-cascader
                                                placeholder="所属上级"
                                                :props="{'label': 'channelName', 'value': 'id', 'children': 'children'}"
                                                clearable
                                                change-on-select
                                                v-model="selectedOptions"
                                                :options="options"
                                                @change="handleChange"
                                                style="width: 100%">
                                        </el-cascader>
                                    </el-form-item>

                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="栏目名称">
                                        <el-input v-model="form.channelName"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="10">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item>
                                <el-button v-if="params.channelId" type="primary" @click="update">编 辑</el-button>
                                <el-button v-else type="primary" @click="create">提 交</el-button>
                                <el-button @click="back">取 消</el-button>
                            </el-form-item>

                            <!--<el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="栏目名称" prop="title">
                                        <el-input v-model="form.title"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="10">
                                    <el-form-item label="访问路径">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="10">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="10">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>-->

                            <!--------------------------------------------------------------->
                            <!--<el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="活动形式">
                                        <el-input v-model="form.type"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-form-item label="活动形式">
                                <el-input v-model="form.type"></el-input>
                            </el-form-item>-->

                        </el-form>
                    </el-col>
                </el-row>

            </el-col>

        </el-row>

    </section>
</template>

<script>
    import { created, updated, selectTree, getParents, selectOne } from '@/api/cms/channel'
    import { selectList as selectListSite } from '@/api/cms/site'
    export default {
        name: 'ChannelForm',
        data() {
            return {
                /**
                 * channelId
                 */
                params: this.$route.query,

                loading: false,
                options: [],
                selectedOptions: [],
                form: {
                    siteId: null,
                    pid: null,
                    channelName: null,
                },
                rules: {},
                siteOptions: []
            }
        },
        created() {
            this.getChannelTree()
            this.getSiteList()
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            handleChange(arrayValue) {//设置上级栏目
                let flag = arrayValue.find((value, index, arr) => {
                    return parseInt(value) === parseInt(this.params.menuId)
                })
                if(flag) {
                    //不能选择自己作为父节点
                    arrayValue.splice(arrayValue.length-1, 1)
                    this.$message({ message: '不能选择自己作为父节点', type: 'warning'});
                }
                if(arrayValue.length > 0) {
                    this.form.pid = arrayValue[arrayValue.length-1]
                } else {
                    this.form.pid = null
                }
            },
            getSiteList() {//获取站点数据列表
                selectListSite().then(response => {
                    for(let item of response.data.list) {
                        this.siteOptions.push({'label': item.siteFullName, 'value': item.id})
                    }
                })
            },
            getChannelTree() {//获取上级栏目数据列表
                this.loading = this.params.channelId ? true : false
                selectTree().then(response => {
                    this.options = response.data
                }).then(() => {
                    //编辑状态下回填上级栏目数据
                    if(this.params.channelId) {
                        getParents({id: this.params.channelId}).then(response => {
                            this.selectedOptions = response.data.reverse()
                            this.selectedOptions.splice(this.selectedOptions.length-1, 1)
                        })
                    }
                }).then(() => {
                    if(this.params.channelId) {
                        selectOne(this.params.channelId).then(response => {
                            this.form = Object.assign({}, response.data)
                            this.loading = false
                        })
                    }
                })
            },
            create() {//添加数据
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        created(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.$router.go(-1)
                            } else {
                                this.$notify({
                                    title: '操作失败', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            },
            update() {//修改数据
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        updated(this.form).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.$router.go(-1)
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>